import React, { Component } from 'react';
import { ManOutlined, WomanOutlined } from '@ant-design/icons';
import './own_banner.less'

class OwnBanner extends Component {

  render() {
    const { avatar, nickname, level, motto, gender } = this.props.memberInfo
    return (
      <div className="own-banner">
        <div className="avatar">
          <img src={avatar} alt="avatar" />
        </div>
        <div className="info">
          <div className="info-top">
            <span className="member-name">{nickname}</span>
            {gender? <ManOutlined /> : <WomanOutlined/>}
            <span>LV{level}</span>
          </div>
          <div>{motto}</div>
        </div>
      </div>
    );
  }
}

export default OwnBanner;